<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="version">
    <meta name="keywords" content="">
    <meta name="autor" content="小舍先生">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>图库</title>
    <link rel="stylesheet" href="css/img_index.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/img_index.js"></script>
    <script>

    </script>
</head>
<body>
<!--主题div-->
<div class="cont_box">
<!--    图库头部-->
    <header class="i_head">
        <div>
            <img id="img_click" alt="logo" src="imgs/29.jpg">
            <h3>GMXS</h3>
        </div>
        <ul name="ul" id="tap_ul" class="i_head-tags">
            <li>二次元</li>
            <li>风景</li>
            <li>影视</li>
            <li>美食</li>
        </ul>
    </header>

<!--    图库主体内容, tap 选项卡 -->
    <div name="i_card" class="i_imgbox">
        <div onclick="openviewbox('0-1')"><img id="0-1" class="i_img" alt="" src="imgs/1.jpeg"><span>二次元</span></div>
        <div onclick="openviewbox('0-2')"><img id="0-2" class="i_img" alt="" src="imgs/2.jpeg"><span>二次元</span></div>
        <div onclick="openviewbox('0-3')"><img id="0-3" class="i_img" alt="" src="imgs/3.PNG"><span>二次元</span></div>
        <div onclick="openviewbox('0-4')"><img id="0-4" class="i_img" alt="" src="imgs/4.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('0-5')"><img id="0-5" class="i_img" alt="" src="imgs/5.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('0-6')"><img id="0-6" class="i_img" alt="" src="imgs/6.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('0-7')"><img id="0-7" class="i_img" alt="" src="imgs/7.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('0-8')"><img id="0-8" class="i_img" alt="" src="imgs/8.jpeg"><span>二次元</span></div>
        <div onclick="openviewbox('0-9')"><img id="0-9" class="i_img" alt="" src="imgs/9.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('0-10')"><img id="0-10" class="i_img" alt="" src="imgs/10.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('0-11')"><img id="0-11" class="i_img" alt="" src="imgs/11.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('0-12')"><img id="0-12" class="i_img" alt="" src="imgs/12.jpg"><span>二次元</span></div>
    </div>

    <!--    图库主体内容, tap 选项卡 -->
    <div name="i_card" class="hide">
        <div onclick="openviewbox('1-1')"><img id="1-1" class="i_img" alt="" src="imgs/14.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-2')"><img id="1-2" class="i_img" alt="" src="imgs/15.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-3')"><img id="1-3" class="i_img" alt="" src="imgs/17.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-4')"><img id="1-4" class="i_img" alt="" src="imgs/18.jpeg"><span>二次元</span></div>
        <div onclick="openviewbox('1-5')"><img id="1-5" class="i_img" alt="" src="imgs/19.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-6')"><img id="1-6" class="i_img" alt="" src="imgs/20.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-7')"><img id="1-7" class="i_img" alt="" src="imgs/21.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-8')"><img id="1-8" class="i_img" alt="" src="imgs/22.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-9')"><img id="1-9" class="i_img" alt="" src="imgs/23.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-10')"><img id="1-10" class="i_img" alt="" src="imgs/24.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-11')"><img id="1-11" class="i_img" alt="" src="imgs/25.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-12')"><img id="1-12" class="i_img" alt="" src="imgs/26.jpg"><span>二次元</span></div>

    </div>

    <!--    图库主体内容, tap 选项卡 -->
    <div name="i_card" class="hide">
        <div onclick="openviewbox('2-1')"><img id="2-1" class="i_img" alt="" src="imgs/29.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-2')"><img id="2-2" class="i_img" alt="" src="imgs/30.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-3')"><img id="2-3" class="i_img" alt="" src="imgs/31.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-4')"><img id="2-4" class="i_img" alt="" src="imgs/32.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-5')"><img id="2-5" class="i_img" alt="" src="imgs/33.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-6')"><img id="2-6" class="i_img" alt="" src="imgs/34.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-7')"><img id="2-7" class="i_img" alt="" src="imgs/35.jpeg"><span>二次元</span></div>
        <div onclick="openviewbox('2-8')"><img id="2-8" class="i_img" alt="" src="imgs/36.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-9')"><img id="2-9" class="i_img" alt="" src="imgs/37.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-10')"><img id="2-10" class="i_img" alt="" src="imgs/38.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-11')"><img id="2-11" class="i_img" alt="" src="imgs/39.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-12')"><img id="2-12" class="i_img" alt="" src="imgs/40.jpg"><span>二次元</span></div>
    </div>

    <!--    图库主体内容, tap 选项卡 -->
    <div name="i_card" class=" hide">
        <div onclick="openviewbox('3-1')"><img id="3-1" class="i_img" alt="" src="imgs/43.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('3-2')"><img id="3-2" class="i_img" alt="" src="imgs/44.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('3-3')"><img id="3-3" class="i_img" alt="" src="imgs/45.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('3-4')"><img id="3-4" class="i_img" alt="" src="imgs/46.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('3-5')"><img id="3-5" class="i_img" alt="" src="imgs/47.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('3-6')"><img id="3-6" class="i_img" alt="" src="imgs/48.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('3-7')"><img id="3-7" class="i_img" alt="" src="imgs/49.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-13')"><img id="1-13" class="i_img" alt="" src="imgs/27.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('1-14')"><img id="1-14" class="i_img" alt="" src="imgs/28.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-13')"><img id="2-13" class="i_img" alt="" src="imgs/41.jpg"><span>二次元</span></div>
        <div onclick="openviewbox('2-14')"><img id="2-14" class="i_img" alt="" src="imgs/42.jpg"><span>二次元</span></div>
    </div>

<!--显示大图的div-->
    <div id="mbox">
        <!--外层透明盒子-->
        <div class="gallery-big-box" id="gallery-big-box">
            <span class="gallery-close-span" onclick="closeviewbox()">x</span>
            <!--显示图片的盒子-->
            <div class="gallery-view-box">
                <img class="gallery-view-imgs" id="0_2">
            </div>
        </div>
    </div>

        <footer class="footer">
            <p>©  2020  葛木小舍先生</p>
            <a href="https://www.cnblogs.com/gemuxiaoshe/"> 博客园</a>
            <a href="https://www.jianshu.com/u/4807bf092a3e"> 简书 </a>
            <a href="https://gitee.com/gmxs"> gitee </a>
        </footer>

  </div>


</body>
</html>